<template>
	<view class="content" :style="[pageStyle]">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="not-diy" v-if="notDiy">
            <u-empty
                    :icon="uEmpty.page"
                    text="模版未找到"
            >
            </u-empty>
        </view>
        <view v-else>
            <wlk-topNav v-if="list.content && list.content[0].type=='topNav'" :item="list.content[0]" :scrollTop="scrollTop" :systemInfo="systemInfo" ></wlk-topNav>
            <view :style="[intoStyle]">
                <block  v-for="(item,index) in list.content" :key="index">
                    <wlk-image v-if="item.type=='image'" :item="item" :systemInfo="systemInfo"></wlk-image>
                    <wlk-notice v-if="item.type=='notice'" :item="item"></wlk-notice>
                    <wlk-search v-if="item.type=='search'" :item="item" :scrollTop="scrollTop"  :borderHeight="borderHeight"></wlk-search>
                    <wlk-text v-if="item.type=='text'" :item="item"></wlk-text>
                    <wlk-blank v-if="item.type=='blank'" :item="item"></wlk-blank>
                    <wlk-border v-if="item.type=='border'" :item="item"></wlk-border>
                    <wlk-nav v-if="item.type=='nav'" :item="item" :systemInfo="systemInfo"></wlk-nav>
                    <wlk-magic v-if="item.type=='magic'" :item="item" :systemInfo="systemInfo"></wlk-magic>
                    <wlk-line @doneWaterFall="setWaterFallHeight" v-if="item.type=='line'" :item="item"  :borderHeight="borderHeight"></wlk-line>
                    <wlk-end  @doneWaterFall="setWaterFallHeight" v-if="item.type=='end'" :item="item" :scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-end>
                    <wlk-tag  @doneWaterFall="setWaterFallHeight" v-if="item.type=='tag'" :item="item" :scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-tag>
                    <wlk-note  @doneWaterFall="setWaterFallHeight" v-if="item.type=='note'" :item="item" :borderHeight="borderHeight"></wlk-note>
                    <wlk-menu v-if="item.type=='menu'" :menus="item" :systemInfo="systemInfo"></wlk-menu>
                    <wlk-ticket @doneWaterFall="setWaterFallHeight" v-if="item.type=='ticket'" :item="item"  :borderHeight="borderHeight"></wlk-ticket>
                    <wlk-ticket-end @doneWaterFall="setWaterFallHeight" v-if="item.type=='ticket-end'" :item="item" :scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-ticket-end>


                </block>
            </view>
        </view>
        <u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>
        <wlk-tabbar></wlk-tabbar>

        <!-- 弹窗提示-->
        <u-popup :show="authShow" mode="center" :safeAreaInsetBottom="false" @close="authShow=false" round="20" closeable>
            <view class="token pd30">
                <view class="center title bold">官方提示</view>
                <image  :src="images.token" mode="widthFix"></image>
                <view class="center desc col9 mb20">禁止分享、复制、转售和传播</view>
                <view class="center desc col9 mb20">认准官方软件购买网址</view>
                <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'90rpx'
                         }" :color="themeColor" @click="copyLink" shape="circle"  text="复制网址"></u-button>
                <view class="center desc col9 auth">©版权归属</view>
                <view class="center desc col9 ">温州微凌客科技有限公司</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    var _self;
    import { copy } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapGetters, mapMutations } from 'vuex';
    export default {
        components: {},
        data() {
			return {
			  list:{},
              scrollTop:0,
              pageStyle:{
			      backgroundColor: ''
              },
              intoStyle:{
                  paddingTop:''
              },
              systemInfo : uni.getSystemInfoSync(),
              notDiy:false,
              borderHeight:0,
              iconStyle: {
                  color: '#FFFFFF'
              },
              authShow:false
			}
		},
        computed:{
            ...mapGetters(['themeColor','uEmpty','images']),
        },
		onLoad() {
		    _self = this;
            _self.getData();
		},
        onShow() {
            uni.hideTabBar();
            if(this.scrollTop>0){
                uni.pageScrollTo({
                    scrollTop: this.scrollTop,
                })
            }
        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onPageScroll(e){
            _self.scrollTop = e.scrollTop;
        },
		methods: {
            getData(){
                uni.$u.http.post('diy/getDiyPage', {
                    windowWidth: _self.systemInfo.windowWidth,
                    type:'home'
                }).then(res => {
                    if(res.data){
                       _self.list = res.data;
                       _self.pageStyle.backgroundColor = _self.list.content[0].style.bgColor;
                       this.notDiy = false;
                   }else{
                       this.notDiy = true;
                   }
                }).catch(res => {

                })
            },
            setWaterFallHeight(height){
                this.borderHeight = height;
            },
            copyLink(){
                copy('https://www.fastadmin.net/store/wlktour.html');
            }
		}
	}
</script>

<style lang='scss'>
    page{
        width: 100%;
        height: auto;
        .content{
            width: 100%;
            height: 100%;
            .not-diy{
                margin-top: 30%;
            }
        }
        .token{
            .title{
                font-size: $font-lg;
            }
            .desc{
                font-size: $font-base;
            }
            .auth{
                margin-top: 80rpx;
            }
            /*width: 100%;*/
            /*background-color: white;*/
            /*image{*/
            /*    width: 400rpx;*/
            /*    margin: 0 auto;*/
            /*}*/
        }
    }

</style>
